<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d动图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 800px;
            border: 1px solid black;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
            transform-style: preserve-3d;
            /* perspective: 800px; 景深 */
            /* transform: rotate3d(1,1,1,40deg); */
            animation: aaa 3s linear infinite;
        }
        @keyframes aaa{
            0%{
                transform:rotatex(150deg) rotatey(30deg) rotateZ(30deg);
            }
            50%{
                transform:rotatex(60deg) rotatey(190deg) rotateZ(130deg);
            }
            100%{
                transform:rotatex(150deg) rotatey(30deg) rotateZ(30deg);
            }
        }
        .box div{
            width: 400px;
            height: 400px;
            position: absolute;
            /* top: 50%;
            left: 50%; */
            top: calc(50% - 200px);
            left: calc(50% - 200px);
            opacity: 0.4;
            font-size: 100px;
            text-align: center;
            line-height: 400px;
            
        }
        .box div:nth-child(1){
            background:rgb(247, 247, 145);
            transform: translateY(-200px) rotateX(90deg);
        }
        .box div:nth-child(2){
            background:rgb(247, 211, 145);
            transform: translatez(200px);
        }
        .box div:nth-child(3){
            background:rgb(205, 247, 145);
            transform: translateX(200px) rotateY(90deg);
        }
        .box div:nth-child(4){
            background:rgb(247, 160, 145);
            transform: translatez(-200px) rotateY(-180deg);
        }
        .box div:nth-child(5){
            background:rgb(216, 145, 247);
            transform: translateX(-200px) rotateY(-90deg);
        }
        .box div:nth-child(6){
            background:rgb(184, 145, 247);
            transform: translateY(200px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>